import 'package:bxultimate/app/router/router_name.dart';
import 'package:bxultimate/app/theme/app_theme.dart';
import 'package:bxultimate/app/theme/gaps.dart';
import 'package:bxultimate/shared/util/util_mk.dart';
import 'package:bxultimate/widgets/mk_page.dart';
import 'package:bxultimate/widgets/mk_scroll_view.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

import '../auth_field.dart';
import 'controller.dart';

class AuthLoginPage extends StatefulWidget {
  const AuthLoginPage({Key? key}) : super(key: key);

  @override
  State<AuthLoginPage> createState() => _AuthLoginPageState();
}

class _AuthLoginPageState extends State<AuthLoginPage> {
  final controller = Get.find<AuthLoginController>();
  final state = Get.find<AuthLoginController>().state;

  @override
  Widget build(BuildContext context) {
    return MkPage(
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: TDNavBar(
          backgroundColor: Colors.transparent,
        ),
        body: MkScrollView(
          keyboardConfig: UtilMk.getKeyboardActionsConfig(
              context, <FocusNode>[controller.nodeText1, controller.nodeText2]),
          padding: const EdgeInsets.only(
              left: AppTheme.iDefaultPadding,
              right: AppTheme.iDefaultPadding,
              top: AppTheme.iDefaultPadding * 2),
          children: _buildBody,
        ),
      ),
    );
  }

  List<Widget> get _buildBody => <Widget>[
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Center(
              child: Text(
                '手机号密码登录',
                style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
              ),
            ),
            Center(
              child: Text(
                '请使用已注册的手机号和密码',
                style: TextStyle(fontSize: 13),
              ),
            ),
          ],
        ),
        Gaps.vGap32,
        AuthField(
          key: const Key('phone'),
          focusNode: controller.nodeText1,
          controller: controller.nameController,
          maxLength: 11,
          keyboardType: TextInputType.number,
          hintText: '手机号',
        ),
        Gaps.vGap24,
        AuthField(
          key: const Key('password'),
          keyName: 'password',
          focusNode: controller.nodeText2,
          isInputPwd: true,
          controller: controller.passwordController,
          keyboardType: TextInputType.visiblePassword,
          hintText: '密码',
        ),
        Gaps.vGap12,
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            GestureDetector(
              onTap: () {
                Get.toNamed(RouterName.userRegister);
              },
              child: Text(
                '账号注册',
                style: TextStyle(color: Colors.blue),
              ),
            ),
            GestureDetector(
                onTap: () {
                  Get.toNamed(RouterName.userForgotPassword);
                },
                child: Text(
                  '忘记密码？',
                  style: TextStyle(color: Colors.blue),
                )),
          ],
        ),
        Gaps.vGap24,
        _buildCheckbox(),
        Gaps.vGap24,
        Obx(() => TDButton(
              theme: TDButtonTheme.primary,
              shape: TDButtonShape.circle,
              height: 50,
              width: Get.width,
              key: const Key('login'),
              onTap: state.clickable ? controller.loginCheck : null,
              disabled: !state.clickable,
              text: '登 录',
            )),
        Gaps.vGap16,
        GestureDetector(
          onTap: controller.toSmsLogin,
          child: Center(
            child: Text(
              '使用验证码登录',
              style: TextStyle(color: TDTheme.of(Get.context!).brandColor5),
            ),
          ),
        )
      ];

  _buildCheckbox() {
    TextStyle style = TextStyle(color: TDTheme.of(Get.context!).brandColor5);

    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Obx(() => TDCheckbox(
              backgroundColor: Colors.transparent,
              checked: state.checkboxIsCheck,
              onCheckBoxChanged: (bool checked) {
                state.checkboxIsCheck = checked;
              },
            )),
        Gaps.hGap4,
        Text(
          "我已同意",
        ),
        GestureDetector(
          onTap: () => {Get.toNamed(RouterName.userSystemSettingUserAgreement)},
          child: Text(
            "《用户协议》",
            style: style,
          ),
        ),
        Text("及"),
        GestureDetector(
          onTap: () => {Get.toNamed(RouterName.userSystemSettingPrivacy)},
          child: Text(
            "《隐私政策》",
            style: style,
          ),
        ),
      ],
    );
  }

  @override
  void dispose() {
    Get.delete<AuthLoginController>();
    super.dispose();
  }
}
